<template>
  <div class="page_root" data-page-name="出入库分析" data-page-identification="r_g74gl69cic">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_38r08ueunv 自定义模板_j5on6yrrii -->
      <div class="page">
        <a-row class="row">
          <a-col :span="8">
            <a-card title="业务现状" class="card">
              <p v-for="item in state.data1">{{ item }}</p>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card title="根因分析" class="card">
              <p v-for="item in state.data2">{{ item }}</p>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card title="经营建议" class="card">
              <p v-for="item in state.data3">{{ item }}</p>
            </a-card>
          </a-col>
        </a-row>
        <div style="text-align: center">最近7天累计入库 <span style="color: red">{{ state.inHouseCount }}</span> 台/套，累计出库
          <span style="color: red">{{ state.outHouseCount }}</span> 台/套，库存增长
          <span style="color: red">{{ state.increaseCount }}</span> 台/套。
        </div>
        <div id="chart"></div>
      </div>
      <!-- end vid_38r08ueunv 自定义模板_j5on6yrrii -->
    </a-spin>
  </div>
</template>
<script setup>
import {
  h,
  ref,
  reactive,
  toRaw,
  markRaw,
  watch,
  computed,
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
import {
  cloneDeep,
  isNullOrEmpty,
  isEmptyArr,
  isNullOrUnDef,
  localGet,
  isContained,
  isArray,
  isEmpty,
  merge,
  getDifferenceArray,
  isObject,
  traversalTreeStructure,
  checkCaseCondition,
  renderStringInTemplate,
  handleBreadcrumbJump,
  throttle
} from '@/utils/index'
import dayjs from 'dayjs'
import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
import { message, notification, Modal } from 'ant-design-vue'
import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format'
/*** PUBLISH_EXEGESIS ***
import UserTableRecords from '@/model/UserTableRecords';
*** PUBLISH_EXEGESIS ***/

// 获取传入的流程ID
const props = defineProps({
  processInstanceId: {
    type: String
  }
})
const immediateWatch = (source, callback) => {
  watch(source, callback, { deep: true, immediate: true })
}

/* -------------------------- 属性定义 -------------------------- */

const setTimeOutList = []
const pageLoading = reactive({
  loading: false,
  tip: undefined
})

// 处理校验
const setSubFormName = (parentInfo, name) => {
  return [parentInfo.parents, parentInfo.cycleIndex, name]
}

/* ========================== 属性定义 ========================== */

/* -------------------------- 元素数据引用 -------------------------- */

/* ========================== 元素数据引用 ========================== */

/* -------------------------- 页面数据 -------------------------- */

/* ========================== 页面数据 ========================== */

/* -------------------------- 响应 -------------------------- */

/* ========================== 响应 ========================== */

/* -------------------------- 函数 -------------------------- */

/* ========================== 函数 ========================== */

/* -------------------------- 页面参数 -------------------------- */

const pageParameter_state = reactive({
  processInstanceId: props.processInstanceId
})

/* ========================== 页面参数 ========================== */

/* -------------------------- 组件事件处理方法 -------------------------- */

// ---------------------------- 组件数据同步 ----------------------------

// ============================ 组件数据同步 ============================

/* ========================== 组件事件处理方法 ========================== */

/* -------------------------- 生命周期 -------------------------- */
onMounted(() => { })

onUnmounted(() => {
  // 销毁定时器
  setTimeOutList.forEach(({ repeat, timer }) => {
    repeat ? clearInterval(timer) : clearTimeout(timer)
  })
})

/* ========================== 生命周期 ========================== */

/* -------------------------- 数据关联处理 -------------------------- */

/* -------------------------- 表单数据同步 -------------------------- */
/* ========================== 表单数据同步 ========================== */

/* ========================== 数据关联处理 ========================== */

/* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

/* ========================== 不同组件自定义的处理逻辑 ========================== */

// ================================定制化逻辑========================================
import * as echarts from 'echarts'

function initChart(dataSource) {
  const xAxis = dataSource.map(item => item.dateMonth)
  const inHouseData = dataSource.map(item => item.inHouseCount)
  const outHouseData = dataSource.map(item => item.outHouseCount)

  let chart = echarts.init(document.getElementById('chart'))
  chart.setOption({
    xAxis: {
      type: 'category',
      data: xAxis
    },
    tooltip: {
      trigger: 'axis'
    },
    yAxis: {
      type: 'value'
    },
    color: ['#44C9FF', '#FF9900'],
    legend: {
      data: ['入库', '出库'],
      top: 'top'
    },
    series: [
      {
        name: '入库',
        data: inHouseData,
        type: 'bar',
        barWidth: '50',
        smooth: true,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          }
        }
      },
      {
        name: '出库',
        data: outHouseData,
        type: 'bar',
        barWidth: '50',
        smooth: true,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          }
        }
      }
    ]
  })
  window.onresize = function () {
    chart.resize()
  }
}

const state = reactive({
  data1: [],
  data2: [],
  data3: [],
  list: [],
  inHouseCount: null,
  outHouseCount: null,
  increaseCount: null
})

function getData() {
  post('/solution-wb/api/v1/analysis/in_out_house_analysis', {}).then(
    ({ data: { businessStatus, reasonAnalysis, manageAugust, dataList, data } }) => {
      state.data1 = businessStatus.split(';')
      state.data2 = reasonAnalysis.split(';')
      state.data3 = manageAugust.split(';')
      state.list = dataList
      state.inHouseCount = data.inHouseCount
      state.outHouseCount = data.outHouseCount
      state.increaseCount = data.increaseCount
      setTimeout(() => {
        initChart(dataList)
      }, 500)
    }
  )
}
onMounted(() => {
  getData()
})

onUnmounted(() => {
  echarts.dispose(document.getElementById('chart'))
})
</script>
<style lang="less" scoped>
.page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.page_root :deep(.@{ant-prefix}-spin-nested-loading),
.page_root :deep(.@{ant-prefix}-spin-container) {
  height: 100%;
}

.table-moreBtn_down {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100px;
}

.table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
  background: #ebf1ff;
}

/*  表格树结构样式处理，展开按钮层级增加*/
:deep(.@{ant-prefix}-table-row-expand-icon) {
  z-index: 1;
}

/*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
:deep(.@{ant-prefix}-table-row-level-1 .ant-table-cell-with-append .cell-wrapper-left) {
  left: 15px !important;
  width: calc(100% - 15px);
}

:deep(.@{ant-prefix}-table-row-level-2 .ant-table-cell-with-append .cell-wrapper-left) {
  left: 30px !important;
  width: calc(100% - 30px);
}

:deep(.@{ant-prefix}-table-row-level-3 .ant-table-cell-with-append .cell-wrapper-left) {
  left: 45px !important;
  width: calc(100% - 45px);
}

:deep(.@{ant-prefix}-table-row-level-4 .ant-table-cell-with-append .cell-wrapper-left) {
  left: 60px !important;
  width: calc(100% - 60px);
}

/* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
:deep(.@{ant-prefix}-transfer-list) {
  height: 100%;
  width: 50%;
}</style>
